<template>
	<view class="my-content-info">
		<view class="list">
			<view class="li-box">
				<view class="li-item">
					<view class="left"><u--image :src="shopMallImgUrl+'vipGift.png'" width="96rpx" height="96rpx"></u--image>
					</view>
					<view class="middle">
						<view class="big-tit">分账订单设置</view>
						<view class="small-tit"></view>
					</view>
					<view class="right">
						<view class="state-btn blue-bg" @click="showSetTip" v-if="isOpenState==false||(isOpenState==true&&stateInfo.approveStatus==2)">开启分账</view>
						<view class="state-btn grey-bg" @click="showCloseTip" v-if="isOpenState==true&&stateInfo.approveStatus==1">关闭分账</view>
						<!-- <view class="state-btn blue-bg" v-if="isOpenState==true&&stateInfo.approveStatus==1">生效中</view> -->
						<!-- <view class="state-btn blue-bg" @click="showCloseTip" v-if="isOpenState==true&&stateInfo.approveStatus==2"></view> -->
						<!-- <view class="state-btn blue-bg" @click="showSetTip" v-if="isOpenState==false&&stateInfo.approveStatus==2">再次开启</view> -->
						<view class="state-btn grey-bg" v-if="isOpenState==true&&stateInfo.approveStatus==0">审核中</view>
					</view>
				</view>
				<view class="li-word">
					特别提示：任何申请都将在审核通过后的第二天零点开始生效
				</view>
				<view class="fail-tip"  v-if="isOpenState==true&&stateInfo.approveStatus==2">
					<view class="title">审核失败！</view>
					<view class="word">审核失败原因：{{stateInfo.rejectContent}}！</view>
				</view>
			</view>

		</view>
		<u-popup :show="show" @close="close" @open="open" :closeOnClickOverlay="true">
			<view class="agreement">
				<view class="tit">阅读协议</view>
				<view class="agreement-box">
					商户开通分账设置后，商户享有盈利共享的费率补贴
					1.收0.38%补0.19%
					2.粉丝跨店消费收3%补3%
					3.商户同时享有粉丝跨店消费0.08%奖励
					4.此设置开通后7天内不能更改，关闭此功能后，商户只享有传统费率的条件，同时粉丝跨店消费奖励无法享有
					5.以上各种补贴及奖励，最终解释权由深圳中盈付数字科技有限公司所有。
				</view>
				<view class="btn" @click="sureSetOpen">同意协议并开通</view>
			</view>
		</u-popup>
		<u-popup :show="showCloseSet" @close="closeSet" :round="10" @open="openSet" mode="center"
			:closeOnClickOverlay="true">
			<view class="tip-box">
				<view class="tit">特别提示</view>
				<view class="agreement-box">
					特别提示，特别提示，特别提示，特别提示，特别提示，特别提示
				</view>
				<view class="btn" @click="closeDivide">确定关闭</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {shopMallImgUrl} from "@/common/config.js"
	import {
		getStoreData,
		dealNum,
		setStoreData,
		httpPost,
		httpGet,
	} from "@/utils/http.js";
	const pic1 = require(`@/img/my/my1.png`);
	const avatar = require(`@/img/my/avatar1.jpg`);
	export default {
		data() {
			return {
				list: [],
				valueOne: false,
				show: false,
				showCloseSet: false,
				setTime: "",
				stateInfo:{
					approveStatus:0,//审核状态
					openDivide:false,
					rejectContent:""
					
				},
				isOpenState:false,//申请状态
				shopMallImgUrl:shopMallImgUrl
			};
		},
		onLoad() {
			this.userInfo = getStoreData("userInfo");
			//this.getinfo();
            this.getState();
		},
		onShow() {

		},
		methods: {
			getState(){
				let that = this;
				httpGet("/api/sellerstoreoutlineconfig/applyInfo")
					.then((res) => {
						if(res.data){
							that.isOpenState=true;
							that.stateInfo.approveStatus=res.data.approveStatus;
							that.stateInfo.rejectContent=res.data.rejectContent;
						}else{
							that.isOpenState=false;
						}
					})
					.catch((e) => {});
			},
			getinfo() {
				let that = this;
				httpGet("/api/sellerstoreoutlineconfig/divideStatus")
					.then((res) => {
						that.isOpenState = res.data.openDivide;
						that.setTime = res.data.openDivideUpdateTime;
					})
					.catch((e) => {});
			},
			
			showSetTip() {
				this.show = true;
			},
			close() {
				this.show = false;
				this.valueTwo = false;
				this.valueOne = false;
			},
			open() {
				this.show = true;
			},
			closeSet() {
				this.showCloseSet = false;
			},
			openSet() {
				this.showCloseSet = true;
			},
			sureSetOpen() {
				let that = this;
				httpGet("/api/sellerstoreoutlineconfig/switchDivide/" + true)
					.then((res) => {
						// that.valueOne = true;
						that.show = false;
						
						that.getState();
					})
					.catch((e) => {});
			},
			closeDivide() {
				let that = this;
				httpGet("/api/sellerstoreoutlineconfig/switchDivide/" + false)
					.then((res) => {
						// that.valueOne = false;
						that.showCloseSet = false;
						that.getState();
					})
					.catch((e) => {});
			},
			showCloseTip(){
				this.showCloseSet=true;
			}

		},
	};
</script>

<style lang="scss">
	.my-content-info {
		background-color: #F7F7F7;
		height: calc(100vh - 44px);
		padding-top: 20rpx;
	}

	.list {
		.li-box {
			background-color: #fff;
			border-radius: 10rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
		}

		.li-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.middle {
				width: 360rpx;

				.big-tit {
					font-size: 32rpx;
					font-weight: bold;
				}

				.small-tit {
					font-size: 28rpx;
					color: #AAAAAA;
				}
			}

			.right {
				padding-top: 24rpx;
				.state-btn{
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
				}
				.blue-bg{
					background: linear-gradient(to right,#28ECEA,#2695F5);
					color: #fff;
				}
				.grey-bg{
					background-color: #E8E8E8;
				}
			}
		}

		.li-word {
			font-size: 24rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.agreement {
		padding: 30rpx;

		.tit {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.btn {
			height: 70rpx;
			width: 100%;
			border-radius: 10rpx;
			background: linear-gradient(to right, #00A8FF, #11E4BF);
			line-height: 70rpx;
			text-align: center;
			color: #fff;
			margin-top: 30rpx;
		}
	}

	.tip-box {
		width: 500rpx;
		padding: 50rpx 50rpx;

		.tit {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			text-align: center;
		}

		.btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			text-align: center;
			background: linear-gradient(to right, #28ECEA, #2695F5);
			margin-top: 30rpx;
			color: #fff;
		}
	}
	.fail-tip{
		background-color: #FFDFE9;
		padding: 30rpx;
		border-radius: 10rpx;
		
		.title{
			font-size: 32rpx;
			color: #FF1C60;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.word{
			font-size: 28rpx;
			color: #FF1C60;
		}
	}
</style>